<template>
    <div class="appeal-refund-info-page">
    <!-- 导航栏 -->
    <van-nav-bar title="申诉退款信息" left-arrow @click-left="goBack" />
    <!-- 统计信息 
    <div class="statistics-section">
        <span>您的退款率：<span style="color: red;">{{refundRate}}%</span>，申诉率：<span style="color: red;">{{appealRate}}%</span></span>
    </div>-->
    <!-- 申诉退款记录列表 -->
    <div v-if="appealRefundRecords && appealRefundRecords.length > 0 " class="no-record-tip">
        <div v-for="(record, index) in appealRefundRecords" :key="index" class="record-item">
        <div class="record-header">
            <div class="商机标题">{{record.sjtitle}}</div>
        </div>
        <div class="record-detail">
            <div class="label">申诉退款时间：</div>
        <div class="value">{{record.sssj}}</div>
        </div>
            <div class="record-detail">
        <div class="label">申诉退款原因：</div>
        <div class="value">{{record.ssnr}}</div>
        </div>
        <div class="record-detail">
        <div class="label">手机号码：</div>
        <div class="value">{{record.cgrphone}}</div>
        </div>
        <div style="display: flex;flex-direction:column;font-size:14px;">
        <div class="label">最新回复：</div>
        <van-steps direction="vertical" style="padding-left:40px;" v-if="record.list && record.list.length > 0 " :active="record.list.length-1">
        <van-step v-for="(item , index ) in record.list" :key="index">
            <div style="font-size:13px;color:green;">{{ item.hfnr }}</div>
            <div  style="font-size:13px;color:#b2b2b2;padding-top:10px;">回复人：{{item.hfrname}}</div>
            <div  style="font-size:13px;color:#b2b2b2;padding-top:10px;">回复时间：{{item.hfsj}}</div>
        </van-step>
        </van-steps>
        </div>
        <div style="position: relative;">
            <van-button type="primary" size="small" style="position: absolute; right: 100px;bottom:10px; margin-top: 5px;" @click="gotoRecharge(record)">回复</van-button>
            <van-button type="danger" size="small" style="position: absolute; right: 0px;bottom:10px; margin-top: 5px;" @click="gotoTel(record)">联系客服</van-button>
        </div>
    </div>
    </div>
    <!-- 没有更多提示 -->
    <van-empty v-else description="暂无申诉退款记录" />
    <van-dialog
        v-model:show="showConfirmDialog"
        show-cancel-button
        title="回复"
        :close-on-click-overlay="false"
        @confirm="handleConfirm"
        :before-close="handleCancel"
        >
        <div class="order-page">
            <!-- 充值部分 -->
            <div class="recharge-section">
                <van-field style="width:85%; border: 1px solid #e4e7ed; box-sizing: border-box;" 
                    v-model="hfnr" size="small" type="textarea" :border="true" placeholder="请输入回复内容" />
            </div>
        </div>
    </van-dialog>

    <van-dialog
            v-model:show="showCustomerServiceDialog"
            title="客服信息"
            :show-confirm-button="true"
            :show-cancel-button="true"
            confirm-button-text="拨打电话"
            cancel-button-text="关闭"
            @confirm="callCustomerService"
            @cancel="showCustomerServiceDialog = false"
        >
            <div style="text-align: center;">
                <p>客服电话：{{ kfdh }}</p>
                <p>客服微信：{{ kfwx }} <span style="color:blue;padding-left:20px;" @click="copyWechat(kfwx)" > 复制 </span></p>
            </div>
        </van-dialog>
    </div>
</template>

<script>import { queryOrderappealList, querySysConifgByKey, updateOrderappeal } from "../../api/api";

export default {
    data() {
    return {
        kfdh: '',
        kfwx: 'shangquanyun5',
        showCustomerServiceDialog: false,
        active: 'inquiry',
        refundRate: 0.00,
        appealRate: 1.26,
        appealRefundRecords: [

        ],
        hyid:undefined,
        pageNum:1,
        pageSize:10,
        showConfirmDialog:false,
        appealid:undefined,
        rechargeAmount:'',
        hfnr:'',
        sszt:''
    };
    },
    created() {
        this.hyid = this.$route.query.hyid;
        const that = this
        this.queryOrderappealList( )
        this.queryKfdh()
    },
    mounted() {
    // 可以在这里添加初始化逻辑
        window.addEventListener('scroll', this.handleScroll);
    },

    beforeDestroy() {
        // 移除滚动事件监听，防止内存泄漏
        window.removeEventListener('scroll', this.handleScroll);
    },

    methods: {
        handleScroll(){
                let that = this
                const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
                if (scrollTop + clientHeight >= scrollHeight -5 ) {
                    that.pageNum = that.pageNum + 1;
                    that.queryOrderappealList()
                }
            },
        callCustomerService() {
            window.location.href = 'tel:' + this.kfdh;
        },
        copyWechat(kfwx){
            // 复制微信号
            navigator.clipboard.writeText(kfwx).then(() => {
                this.$toast('复制成功');
            }).catch((err) => {
                this.$toast('复制失败，请稍后重试');
                console.error('复制失败:', err);
            });
        },

        queryKfdh(){
            let that = this
            querySysConifgByKey({ configKey: 'khphone' }).then(res => {
                if (res.code == 200) {
                    that.kfdh = res.msg
                }
            })
        },
        gotoTel(){
            this.showCustomerServiceDialog = true
        },
        handleConfirm(){
            this.showConfirmDialog = false
            let param = {
                appealid:this.appealid,
                fknr:this.hfnr,
                sszt:this.sszt
            }
            updateOrderappeal(param).then(res=>{
                if(res.code==200){
                    this.$toast('回复成功')
                    this.queryOrderappealList()   
                }
            })
        },
        handleCancel(){
            this.showConfirmDialog = false
        },
        gotoRecharge(item){
            this.appealid = item.appealid
            this.sszt = item.sszt
            this.showConfirmDialog = true
        },
        queryOrderappealList(){
            let that = this
            let param = {
                hyid:this.hyid,
                pageNum:this.pageNum,
                pageSize:this.pageSize
            }
            queryOrderappealList(param).then(res=>{
                if(res.code==200){
                    that.appealRefundRecords = that.pageNum == 1 ?  res.rows : that.appealRefundRecords.concat(res.rows);
                }
            })  
        },
        goBack() {
            this.$router.back();
        },
        handleClick(type) {
            this.active = type;
        }
    }
};
</script>

<style scoped>
.appeal-refund-info-page {
    background-color: #f7f7f7;
}
.statistics-section {
    margin-bottom: 15px;
}
.record-item {
    background-color: white;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.商机标题 {
    font-size: 16px;
    font-weight: bold;
}
.record-detail {
    display: flex;
    margin-bottom: 10px;
    font-size: 13px;
}
.label {
    width: 100px;
    color: #666;
    text-align: center;
}
.value {
    flex: 1;
    padding-top:2px;
}

.recharge-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width:100%;
    font-size:15px;
    height: 150px;
}

.order-page {
    padding: 5px;
    text-align: center;
}
</style>